<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div class="outDiv">
    <div class="main" >
        <ul class="outUl">
            <li class="selectDown">
                <ul>
                    <label>Mac</label>
                    <li>MacBook Air</li>
                    <li>MacBook Pro</li>
                    <li>iMac</li>
                </ul>
            </li>
            <li class="selectDown">
                <ul>
                    <label>iPad</label>
                    <li>iPad Pro</li>
                    <li>iPad Air</li>
                    <li>iPad mini</li>
                </ul>
            </li>
            <li class="selectDown">
                <ul>
                    <label>iPhone</label>
                    <li>iPhone 12 Pro</li>
                    <li>iPhone 12</li>
                    <li>iPhone SE</li>
                </ul>
            </li>
            <li class="selectDown">
                <ul>
                    <label>Watch</label>
                    <li>Apple Watch Series 6</li>
                    <li>Apple Watch SE</li>
                    <li>Apple Watch 3</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<style type="text/css">
    body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .outDiv{
        width: 300px;
        height: 100%;
        background-color:  gray;
        position: fixed;
        left: -280px;
        text-align: center;
        transition: 0.6s;
    }
    .outDiv:hover{
        left: -40px;
    }
    .selectDown label{
        display: block;
        width: 200px;
        height: 40px;
        background-color: #777777;
        font-size: 15px;
        text-align: center;
        color:white;
        margin-bottom: 5px;
        margin-top: 10px;
    }
    .selectDown{
        height: 40px;
        margin-bottom: 5px;
        /* 如果内容超出范围则切断 */
        overflow: hidden;
        float: left;
        padding-right: 5px;
        /* 动画时间 */
        transition: 0.6s;
    }
    .selectDown:hover{
        height: 140px;
    }
    .selectDown ul li{
        width: 100%;
        height: 30px;
        background-color: antiquewhite;
        list-style-type: none;
    }
    .selectDown ul li:hover{
        background-color: aqua;
    }
</style>
